import React, { Component } from 'react';
import { Row, Form, Button, message, FormInstance } from 'antd';
import styles from './index.less';
import { history } from 'umi';
import CustomInputNumber from '@/components/custom_input_number';
import { observer } from 'mobx-react';
import { userStore } from '@/stores/user';
import SendSmsButton from '@/components/send_sms_btn';
import { RuleUtils } from 'xo-web-base';

@observer
export default class Login extends Component<any> {
  form = React.createRef<FormInstance>();

  onFinish = async (values: any) => {
    const { mobile, code } = values;
    const result = await userStore.freeLogin(mobile, code);
    if (result) {
      message.success('登录成功');
      history.push('/');
    }
  };
  gologinPage = () => {
    const { mobile } = this.form.current?.getFieldsValue();
    history.push({ pathname: './login', state: { mobile: mobile } });
  };
  render() {
    const { loading } = userStore;
    const mobile = this.props.location.state?.mobile;
    return (
      <div>
        <Row justify="space-between">
          <Row className={styles.title_wrap}>
            <div className={styles.title}>登录</div>
            <div className={styles.border}></div>
          </Row>
        </Row>
        <Form
          name="normal_login"
          className={styles.login_form}
          initialValues={{ remember: true }}
          onFinish={this.onFinish}
          ref={this.form}
        >
          <Form.Item
            name="mobile"
            rules={RuleUtils.mobileRules}
            initialValue={mobile}
          >
            <CustomInputNumber placeholder="请输入手机号" maxLength={11} />
          </Form.Item>
          <Row>
            <Form.Item
              name="code"
              className={styles.code_input}
              rules={RuleUtils.codeRules}
            >
              <CustomInputNumber maxLength={6} placeholder="请输入验证码" />
            </Form.Item>
            <SendSmsButton
              mobile={() => this.form?.current?.getFieldValue('mobile')}
              sendType={3}
            />
          </Row>

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className={styles.login_form_button}
              loading={loading}
            >
              登录
            </Button>
            <div onClick={this.gologinPage} className={styles.forgetpwd}>
              使用密码账号登录
            </div>
          </Form.Item>
        </Form>
      </div>
    );
  }
}
